<template>
  <view class="category-page">
    <!-- 自定义导航栏 -->
    <!-- <up-navbar
      title="作品分类"
      :bgColor="'#fff'"
      height="50"
      fixed
      placeholder
      :leftIconColor="'#333'"
      @leftClick="handleBack"
    >
      <template #left>
        <up-icon name="arrow-left" color="#333" size="18"></up-icon>
      </template>
      <template #right>
        <up-icon
          name="search"
          color="#333"
          size="20"
          @click="showSearch"
        ></up-icon>
      </template>
    </up-navbar> -->

    <view class="content">
      <!-- 搜索框 -->
      <view class="search-section" v-if="showSearchBar">
        <up-input
          v-model="searchKeyword"
          placeholder="搜索分类名称"
          :border="'surround'"
          clearable
          @confirm="handleSearch"
        >
          <template #prefix>
            <up-icon name="search" color="#999" size="16"></up-icon>
          </template>
          <template #suffix>
            <up-icon
              name="close"
              color="#999"
              size="16"
              @click="hideSearch"
            ></up-icon>
          </template>
        </up-input>
      </view>

      <!-- 分类卡片网格 -->
      <view class="category-grid">
        <view
          v-for="(item, index) in filteredCategories"
          :key="index"
          class="category-card"
          @click="handleCategoryClick(item)"
        >
          <image
            :src="item.image"
            class="category-image"
            mode="aspectFill"
          ></image>
          <view class="category-info">
            <text class="category-name">{{ item.name }}</text>
            <text class="category-count">{{ item.count }} 件作品</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 悬浮AI助手按钮 -->
    <floating-ai-btn
      :bottomOffset="100"
      :showTip="false"
      @click="handleAiBtnClick"
    >
    </floating-ai-btn>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from "vue";
import FloatingAiBtn from "@/components/floating-ai-btn/floating-ai-btn.vue";

// 响应式数据
const showSearchBar = ref(false);
const searchKeyword = ref("");

// 分类数据
const categories = reactive([
  {
    name: "书法作品",
    count: 156,
    image:
      "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
    color: "#4caf50",
  },
  {
    name: "绘画作品",
    count: 89,
    image:
      "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
    color: "#2196f3",
  },
  {
    name: "篆刻作品",
    count: 34,
    image:
      "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
    color: "#ff9800",
  },
  {
    name: "文化作品",
    count: 67,
    image:
      "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
    color: "#9c27b0",
  },
  {
    name: "手工作品",
    count: 23,
    image:
      "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
    color: "#795548",
  },
  {
    name: "其他作品",
    count: 45,
    image:
      "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
    color: "#607d8b",
  },
]);

// 筛选后的分类
const filteredCategories = computed(() => {
  if (!searchKeyword.value) {
    return categories;
  }
  return categories.filter((item) => item.name.includes(searchKeyword.value));
});

// 返回上一页
const handleBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    // 如果有上一页，则返回上一页
    uni.navigateBack();
  } else {
    // 如果没有上一页，则跳转到首页
    uni.switchTab({
      url: "/pages/index/index",
    });
  }
};

// 显示搜索框
const showSearch = () => {
  showSearchBar.value = true;
};

// 隐藏搜索框
const hideSearch = () => {
  showSearchBar.value = false;
  searchKeyword.value = "";
};

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑已在 computed 中处理
};

// 点击分类项
const handleCategoryClick = (category) => {
  uni.navigateTo({
    url: `/gallery_pages/artwork/list?category=${category.name}`,
    success: () => {
      console.log(`进入${category.name}`);
    },
    fail: () => {
      uni.showToast({
        title: "功能开发中",
        icon: "none",
      });
    },
  });
};

// 处理AI按钮点击
const handleAiBtnClick = () => {
  console.log("分类页AI按钮点击");
};
</script>

<style lang="scss" scoped>
.category-page {
  min-height: 100vh;
  background: #f5f6fa;
}

.content {
  padding: 10rpx 10rpx 36rpx;
}

.search-section {
  margin-bottom: 30rpx;

  :deep(.up-input) {
    background: #fff;
    border-radius: 50rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.category-card {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

.category-image {
  width: 100%;
  height: 200rpx;
}

.category-info {
  padding: 20rpx;

  .category-name {
    display: block;
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 8rpx;
  }

  .category-count {
    font-size: 24rpx;
    color: #999;
  }
}
</style>
